<template>
    <view :data-theme="globPrimary">
        <u-navbar title="解除绑定"></u-navbar>
        <view class="modify-phone">
            <view class="item-col u-border-bottom">
                <view class="label">手机号</view>
                <view class="text" v-if="!$u.test.empty(userInfo.phone)">{{
                    userInfo.phone | formatMask
                }}</view>
            </view>
            <u-field v-model="verify" label="验证码" placeholder="请填写验证码">
                <edu-button
                    slot="right"
                    type="text"
                    size="mini"
                    hover-class="none"
                    :disabled="disabled"
                    @click="handleGetCode(userInfo.phone)"
                    >{{ codeTips }}</edu-button
                >
            </u-field>
            <edu-button
                class="btn"
                @click="handleRemovebind"
                type="primary"
                :disabled="btnDisabled"
                >解除绑定</edu-button
            >
        </view>

        <u-verification-code
            seconds="60"
            ref="uCode"
            @change="codeChange"
            @end="codeEnd"
            @start="codeStart"
        ></u-verification-code>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            query: {},
            verify: "",
            codeTips: "",
            disabled: false,
        };
    },
    onLoad(query) {
        this.query = query;
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            userInfo: "user/getUserInfo",
        }),
        btnDisabled() {
            return this.$u.test.empty(this.verify);
        },
    },
    methods: {
        handleRemovebind() {
            this.$edu.api
                .deleteUserThirdloginBind({
                    type: this.query.key,
                    verify: this.verify,
                })
                .then((res) => {
                    this.$refs.uToast.show({
                        title: res.msg,
                        duration: 1000,
                        back: true,
                    });
                })
                .catch((res) => {
                    this.$u.toast(res.msg);
                });
        },
        // 获取验证码
        handleGetCode(phone) {
            if (this.$refs.uCode.canGetCode) {
                this.$edu.api
                    .createVerify({
                        phone: phone,
                        type: "unbind_" + this.query.key,
                    })
                    .then((res) => {
                        const { msg } = res;
                        this.$u.toast(msg);
                        this.$refs.uCode.start();
                    })
                    .catch((res) => {
                        this.$u.toast(res.msg);
                    });
            }
        },
        // 倒计时
        codeChange(text) {
            this.codeTips = text;
        },
        // 倒计时开始
        codeStart() {
            this.disabled = true;
        },
        // 倒计时结束
        codeEnd() {
            this.disabled = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.modify-phone {
    min-height: calc(100vh - 44px);
    background-color: #ffffff;
    padding: 30rpx 30rpx 0;
    .item-col {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        font-size: 14px;
        color: $edu-main-color;
        min-height: 90rpx;
        .label {
            width: 130rpx;
        }
        .text {
            margin-left: 10rpx;
        }
    }
    .btn {
        margin-top: 170rpx;
    }
}
</style>
